<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello vue</title>
<style type="text/css">

  .red{
    color:red;
  }

  .thin{
    font-weight: 200;
    text-decoration: underline;/*下划线*/
  }

  .italic{
    font-style: italic;/*斜体*/
  }

  .active{
    letter-spacing: 0.5em;/*仅对英文起作用*/
  }

  






</style>
</head>
<body>







<div id="app">
  

  <!-- v-bind 属性绑定 class 类,三元表达式判定ture\false 并且执行相应结果 -->
  <h1 :class="['thin','italic', flag?'red':'']">这是一个三元表达式的h1标签</h1>
	 

    <!-- 用对象判定0/1  执行结果 (三元表达式代码过多,所以精简) -->
  <h1 :class="['thin','italic', {'red':flag}]">这是一个用对象 {'red':flag} 判定的h1标签</h1>
    
  <!-- classObj -->
  <h1 :class="classObj">这是一个用 classObj 判定的h1标签</h1>


</div>









<br>
<script src="vue.js"></script>

<script type="text/javascript">

var app = new Vue({
  el: '#app',

  data: {
  	flag:true,
    classObj:{red:true,thin:true,italic:false}
  },

  methods:{

  	


  }

})





</script>

	
</body>
</html>